<template>
  <view class="main">
    <view>
      <up-input placeholder="请输入活动名称" v-model="params.content" @change="search" suffixIcon="search"
                suffixIconStyle="color: #909399;" :font-size="rpx2px(23)" shape="circle"/>
    </view>

    <scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + (windowHeight - 70) + 'px;' " @scrolltolower="lower">
      <view v-for="item in activityList" class="item" @click="toDetails(item.id)">
        <image
            :src="item.activityPoster.indexOf('aliyuncs.com') === -1 ? 'https://minio.gzryzl.com/huatai/' + item.activityPoster : item.activityPoster"
            mode="widthFix"/>
        <view>{{ item.activityName }}</view>
        <view>活动时间：{{ item.activityStartTime?.substring(0, 10) }} 至
          {{ item.activityEndTime?.substring(0, 10) }}
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import {getActivityRecallListApi} from "@/api/activity"
import {ref } from "vue"
import {onShow} from "@dcloudio/uni-app"
import {rpx2px} from "@/utils/utils";

let windowHeight = ref(0)
onShow(() => {
  windowHeight = uni.getSystemInfoSync().windowHeight

  activityList.value = []
  params.value.page = 1
  params.value.content = ''
  getActivityList()
})

let activityList = ref([]),
    listTotal = ref(0),
    params = ref({limit: 3, page: 1, content: ''})

const getActivityList = async () => {
  await uni.showLoading({
    title: "加载中..."
  })

  const res = await getActivityRecallListApi(params.value)

  const {code, data} = res
  if (code === 200) {
    uni.hideLoading()
    activityList.value = [...activityList.value, ...data.records]
    listTotal.value = data.total
  }
}

const search = (e) => {
  activityList.value = []
  params.value.page = 1
  params.value.content = e
  getActivityList()
}

const lower = (() => {
  params.value.page++
  getActivityList()
})

const toDetails = (e) => {
  uni.navigateTo({
    url:`./activity-lookback-details?id=${e}`
  })
}
</script>

<style lang="less" scoped>
.uni-page-body, #app, page, html, body {
  height: 100vh;
}

.main {
  padding: 0 10px 10px 10px;
  background-color: #ffffff;
  height: 100%;

  > view:nth-child(1) {
    position: fixed;
    width: calc(100% - 40px);
    height: 60px;
    top: 0;
    left: 0;
    padding-top: 10px;
    padding-left: 20px;
    background-color: #ffffff;
  }
}

.scroll-Y {
  margin-top: 60px;
}

.item {
  box-shadow: 0 0 5px 0 #f3f2f2;
  padding: 10px;

  > image {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }

  > view {
    color: #969998;
    font-size: 14px;
    margin-top: 5px;
  }
}
</style>
